import React from 'react';
import { Button, Row, Col, message, Tooltip } from 'antd';
import List from './list';
import storage from '../../../utils/storage';
import FilterTool from '../../../components/FilterTool';
import CommonListsIndex from '../../../components/CommonLists/index';

class TemplateIndex extends CommonListsIndex {
  constructor(props) {
    super(props);
    this.api = 'template';
    this.editComponent = '/strategy/Template/id/edit';
    this.detailComponent = '/strategy/Template/id/detail';
    this.listsComponent = List;
    this.state = {
      ...this.state,
      riskTypes: [],
      columns: [],
      selectedRowKeys: [],
      selectedRows: [],
    };
  }
  // componentDidMount() {
  //   this.freshQueryList()
  // };
  // 打开新窗口、页面的id
  getOpenParam = (record) => {
    return record.strategy_template_id;
  };
  // 策略导入回调
  onChange = (info) => {
    this.freshQueryList();
    if (info.file.status !== 'uploading') {
      console.log(info.file, info.fileList);
    }
    if (info.file.status === 'done') {
      message.success(`${info.file.name} 导入成功`);
    } else if (info.file.status === 'error') {
      message.error(`${info.file.name} 导入失败`);
    }
  };

  // 详情
  showDetail = (record) => {
    this.props.history.push(this.replaceUrlForId(this.detailComponent, this.getOpenParam(record)));
  };
  // 表列定义
  getColumns = () => {
    return [
      {
        title: '策略模板名称',
        key: 'name',
        dataIndex: 'name',
        render: (text, record) => {
          return (
            <Tooltip title={text} placement='topLeft'>
              <div className='overflowtext'>
                <Button type='link' onClick={() => this.showDetail(record)}>
                  {text}
                </Button>
              </div>
            </Tooltip>
          );
        },
        ellipsis: true,
      },
      {
        title: '描述',
        key: 'remark',
        dataIndex: 'remark',
        ellipsis: true,
      },
      {
        title: '可见部门',
        key: 'dept_arr',
        dataIndex: 'dept_arr',
        render: (text, record) => {
          return (
            <Tooltip title={text.name.join()} placement='topLeft'>
               {text.name.join()}
            </Tooltip>
          );
        },
        ellipsis: true,
      },
      {
        title: '创建/修改人',
        key: 'create_user_name',
        dataIndex: 'create_user_name',
        render: (text, record) => {
          return (
            <Tooltip title={`${record.create_user_name}/${record.update_user_name}`}>
              <div className='overflowtext'>{`${record.create_user_name}/${record.update_user_name}`}</div>
            </Tooltip>
          );
        },
      },
      {
        title: '修改时间',
        key: 'update_time',
        dataIndex: 'update_time',
        width: 150,
        render: (text, record) => {
          return (
            <Tooltip title={text} placement='topLeft'>
              <div className='overflowtext' style={{ width: '80%' }}>
                {text}
              </div>
            </Tooltip>
          );
        },
      }
    ];
  };

  export = () => {
    if (this.state.selectedRowKeys.length === 0) {
      message.warning('请选择要导出的策略模板');
      return;
    }
    this.props.history.push('/strategy/Template/export');
  };

  render() {
    const ListsComponent = this.listsComponent;
    const data = [
      {
        type: 'Search',
        key: 'keyword',
        name: 'keyword',
        defaultValue: '',
        placeholder: '请输入模板名|创建人|修改人进行搜索',
      },
    ];
    const rowSelection = {
      columnWidth: 30,
      onChange: (selectedRowKeys, selectedRows) => {
        const f = [...new Set([...selectedRowKeys, ...selectedRows.map((item) => item.strategy_template_id)])];
        const fx = [...this.state.selectedRows, ...selectedRows];
        const rows = f.map((id) => {
          return fx.find((it) => it.strategy_template_id === id);
        });
        this.setState({
          selectedRowKeys: f,
          selectedRows: rows,
        },
        () => {
          // storage.strategyExport = rows;
          const params = {
            selectedRowKeys: this.state.selectedRowKeys,
            currentEventId: this.state.currentEventId
          }
          storage.strategyExportMsg = params;
        }
        );
      }
    };
    return (
      <div>
        <Row type='flex' justify='space-between' align='middle'>
          <Col span={12}>
            <Button
              onClick={() => {
                this.props.history.push('/strategy/Template/import');
              }}
            >
              导入模板
            </Button>
            <Button onClick={this.export} className='marl10'>
              导出模板
            </Button>
          </Col>
          <Col span={12}>
             <FilterTool
               ref='filterTool'
               data={data}
               colNum={1}
               query={this.freshQueryList}
               refreshFilter={this.refreshFilter}
               isOnChange={true}
               refresh={this.resetList}
               justify='end'
             />
          </Col>
        </Row>
        <div className='inner-content' style={{ marginTop: '10px' }}>
          <ListsComponent
            rowSelection={rowSelection}
            {...this.state}
            {...this.props}
            edit={this.edit}
            onChangePagination={this.onChangePagination}
            defaultColumns={this.state.defaultColumns} 
            columns={this.getColumns()}
            queryList={this.freshQueryList}
            rowKey='strategy_template_id'
          />
        </div>
      </div>
    );
  }
}

export default TemplateIndex;
